<template>
    <div class="icons">
        <swiper >
            <swiper-slide>
                <div class="icon" v-for="item of list" :key="item.id">
                    <div class="icon-img">
                    <img :src="item.imgUrl"
                         alt="" class="icon-img-content">
                    </div>
                    <span class="icon-desc">{{item.desc}}</span>
                </div>
            </swiper-slide>

        </swiper>

    </div>
</template>

<script>
    export default {
        name: "Icons",
        props:{
            list : Array
        },

        computed: {
            pages () {
                let pages = [];
                this.list.forEach((item, index) => {
                    const page = Math.floor(index / 8);
                    if (!pages[page]) {
                        pages[page] = []
                    }
                    pages[page].push(item)
                });
                console.log(pages);
                return pages;


            },

        }
    }
</script>

<style scoped lang="stylus">
    .icons >>> .swiper-container
        height:  0
        padding-bottom:  50%
        margin-top:.1rem
    .icon
        box-sizing:border-box
        padding:.1rem
        height:0
        position:relative
        float:left
        width:  25%
        padding-bottom:  25%
        .icon-img
            position:absolute
            top:0
            left:0
            right:0
            bottom:.50rem
            .icon-img-content
                height:80%
                display:block
                margin:0 auto
        .icon-desc
            position:absolute
            left:0
            right:0
            height:.58rem
            line-height:.44rem
            bottom:0
            color:#333
            text-align:center


</style>
